import { createElement, useEffect, useState } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Image from 'rax-image';
import uploadIcon from '@/assets/images/uploadIcon.png';
import './index.css';

const ModalMyFace = (props) => {
  const [active,setActive] = useState(true)
  let {
    template,
    num,
    leftface,
    rightface,
    templateName,
    templateUse,
    leftName,
    rightName
  } = props;

  useEffect(()=>{
    if (num == 1) {
      leftface ? setActive(true) : setActive(false);
    } else {
      leftface && rightface ? setActive(true) : setActive(false);
    }
  }, [num, leftface, rightface])
  
  const onMakeing = (e) => {
    e.stopPropagation();
    props.onMakeing && props.onMakeing();
  }

  const doUpload = (key, e) => {
    props.onUpload && props.onUpload({type: key, event: e});
  }

  const onRemove = (key, event) => {
    console.log('event', event)
    event.stopPropagation();
    props.onRemove && props.onRemove({type: key});
  }

  const renderFace = (val, type) => {
    if (val) {
      return (
        <View className='modal_myface_list_section' catchTouchMove>
          <View className='modal_myface_list_item' catchTouchMove>
            <Image
              source={{
                uri: val
              }} 
              className='modal_myface_list_item_img'
              mode='aspectFill'
            />
            <View className='modal_myface_list_item_del' catchTouchMove onClick={(e)=>{onRemove(type, e)}}>
              <Image
                source={{
                  uri: 'https://jala-test-images.sndaurl.cn/images/removeIcon.png'
                }}
                className='modal_myface_list_item_del_icon'
                mode='aspectFill'
              />
            </View>
          </View>
          <View className='modal_myface_list_section_text'>{type == 'leftface' ? leftName : rightName}</View>
        </View>
      )
    } else {
      return (
        <View className='modal_myface_list_section' catchTouchMove onClick={(e)=>{doUpload(type, e)}}>
          <View className='modal_myface_list_item upload'>
            {
              num == 2 ? (
                <View className='modal_myface_list_item_tip'>
                  {type == 'leftface' ? '左边' : '右边'}
                </View>
              ) : null
            }
            {/* <Image
              source={{
                uri: 'https://jala-test-images.sndaurl.cn/images/add.png'
              }}
              mode='aspectFill'
              className='modal_myface_list_item_add'
            /> */}
            <Image
              source={{
                uri: uploadIcon
              }}
              mode='aspectFill'
              className='modal_myface_list_item_add'
            />
            <View className='modal_myface_list_item_text'>点击上传</View>
          </View>
        </View>
      )
    }
  }

  return (
    <View 
      className='maskView'
      catchTouchMove={false}
      onClick={()=>{
        props.onClose && props.onClose()
      }}
    >
      <View
        className='modal_myface'
        onClick={(e)=>{
          e.stopPropagation();
        }}
      >
        <View className='modal_myface_img'>
          <Image
            source={{
              uri: template
            }}
            className='modal_myface_img_detail'
            mode='aspectFill'
          />
        </View>
        <View className='modal_myface_name'>{templateName}</View>
        <View className='modal_myface_desc'>已有{templateUse}人使用</View>
        <View className='modal_myface_invite'>
          选择我的脸部档案
          {
            leftface && rightface ? null : (
              <button
                open-type="share"
                className='modal_myface_invite_action'
                catchTouchMove
                onClick={()=>{
                  my.showSharePanel();
                  // props.onShare && props.onShare();
                }}
              >
                邀请好友生成
              </button>
            )
          }
        </View>
        {
          num == 1 ? (
            <View className='modal_myface_list'>
              {renderFace(leftface, 'leftface')}
            </View>
          ) : (
            <View className='modal_myface_list'>
              {renderFace(leftface, 'leftface')}
              {renderFace(rightface, 'rightface')}
            </View>
          )
        }

        <View className='modal_myface_line'></View>
        <View className='modal_myface_footer' catchTouchMove>
          <View className='modal_myface_footer_info'>
            <Image
              source={{
                uri: 'https://jala-test-images.sndaurl.cn/images/hourglass.png'
              }}
              mode='aspectFill'
              className='modal_myface_footer_info_icon'
            />
            <View className='modal_myface_footer_info_detail'>
              <View className='modal_myface_footer_info_detail_tip'>预计消耗时间</View>
              <View className='modal_myface_footer_info_detail_desc'>
                <Text className='modal_myface_footer_info_detail_desc_num'>5</Text>秒钟
              </View>
            </View>
          </View>
          <View
            className={`modal_myface_footer_btn ${active ? 'active' : ''}`}
            catchTouchMove
            onClick={(e)=>{onMakeing(e)}}
          >
            妆容生成
          </View>
        </View>
      </View>
    </View>
  )
}

export default ModalMyFace;
